import { useMap } from 'ahooks';
import { Button, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import Source from './Entity/Source';
import { useYmTableScrollY } from './hooks/useTableScorll';

interface SelectedTableProps {
  value?: ReturnType<typeof useMap<string, Source>>[0];
  valueSet?: ReturnType<typeof useMap<string, Source>>[1];
  menuKey?: string;
}
// 已经被选中的内容的表格的展示
export function SelectedTable({ value, valueSet, menuKey }: SelectedTableProps) {
  // 右侧选中的表格
  const columns: ColumnsType<Source> = [
    {
      title: '序号',
      render(_value, record, index) {
        const str = '0' + (index + 1);
        return str.substring(str.length - 2, str.length);
      },
      width: 48,
    },
    {
      title: '名称',
      width: 160,
      dataIndex: 'name',
      ellipsis: true,
    },
    {
      title: '操作',
      width: 50,
      render(_value, record) {
        return (
          <Button
            type="text"
            size="small"
            onClick={(e: React.MouseEvent) => {
              e.stopPropagation();
              valueSet?.remove(record.id);
            }}
          >
            <span className="safe-edu_table_operation_text">删除</span>
          </Button>
        );
      },
    },
  ];

  const { tableRef, scrollY, className } = useYmTableScrollY();

  return (
    <Table
      className={className()}
      ref={tableRef}
      scroll={{ x: '100%', y: scrollY }}
      pagination={false}
      tableLayout="fixed"
      columns={columns}
      dataSource={value ? [...value.values()] : undefined}
      rowKey="id"
      style={{ height: '100%' }}
    ></Table>
  );
}
